<template>
  <div ref="hAdmin" class="h-main">
    <!--  搜索专区 -->
    <!--    <div class="h-search">搜索专区</div>-->
    <!--  操作专区 -->
    <div ref="hAction" class="h-action">
      <el-button :icon="Refresh" />
      <el-button type="success" :icon="Plus" @click="openAddDialog">添加</el-button>
    </div>

    <add :req-form="rowData" @close="closeAddDialog" />
    <!-- 列表专区 -->
    <div ref="hTable" class="h-table">
      <el-table
        :data="tableData"
        row-key="id"
        default-expand-all
        border
        stripe
        style="width: 100%"
      >
        <el-table-column fixed prop="title" label="标题" width="150" />
        <el-table-column prop="component" label="组件路径" />
        <el-table-column prop="path" label="访问路径" />
        <el-table-column prop="redirect" label="重定向地址" />
        <el-table-column prop="icon" label="是否显示" width="100px" />
        <el-table-column fixed="right" label="操作" width="130px">
          <template #default>
            <div
              style="
                display: flex;
                flex-wrap: wrap;
                margin: 0;
                padding: 0;
                justify-content: space-between;
              "
            >
              <div>
                <el-button link type="primary" size="small">编辑</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Plus, Refresh } from "@element-plus/icons-vue";
import { nextTick, onMounted, reactive } from "vue";

// 接口
import { rowForm } from "@/views/system/page/page";

import add from "./add.vue";

// 数据列表
const tableData = [
  {
    id: 1,
    title: "订单管理",
    component: "Layout",
    children: [
      { id: 2, title: "订单列表" },
      { id: 3, title: "售后订单" }
    ]
  }
];

onMounted(() => {
  window.onresize = () => {};

  nextTick(() => {
    console.log("计算表的高度");
    sumTableHeight();
  });
});

// 注册窗口对象
const rowData: rowForm = reactive({
  show: false
});
// 打开添加窗口
const openAddDialog = () => {
  if (rowData.show) {
    rowData.show = false;
  }
  rowData.show = true;
  console.log("打开窗口", rowData);
};

// 关闭添加弹窗
const closeAddDialog = () => {
  rowData.show = false;
};

// 方法
const handleClick = () => {
  console.log("click......");
};

const sumTableHeight = () => {
  console.log("总体内容高度");
};
</script>

<style scoped>
.h-main {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.h-action {
  margin-bottom: 5px;
}
</style>
